/**
 * 
 */
<template>
  <div id="qmviewer_container" style="height: 100%">
    <cesium
      v-bind:msg="cesiumMsg"
      v-bind:isCompont="isCompont"
      @callFatherCesium="callFatherCesium"
    ></cesium>
    <qmviewer
      v-bind:modelName="modelName"
      v-bind:isCompont="isCompont"
      v-bind:forGis="true"
      @callFather_loaded="callFather_loaded"
      @callFather_before="callFather_before"
    ></qmviewer>
  </div>
</template>

<script>
import cesium from "../../components/cesium.vue";
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
import { CesiumTool } from "../../components/bimjs/qmodel.plugin";
export default {
  name: "DemoCesium",
  data() {
    return {
      cesiumMsg: "0",

      //你需要打开的模型名称放这里。
      modelName: "黄河三桥7.17主体.rvt",
      isCompont: true,
      cesiumPlugin: null,
      viewer: null,
      targetPosition: {},
    };
  },
  // 注册组件
  components: {
    cesium,
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    callFatherCesium(parm) {
      // 这个项目的地址，和默认相机位置，模型的旋转角度。
      this.viewer = parm.viewer;
      this.Cesium = parm.Cesium;
      var projectLocation = {
        xp: 117.13857142089844,
        yp: 36.83299324568535,
        startCamera: [
          -2332015.4389710515, 4549874.814668208, 3802374.845907504,
        ],
        rotateZ: 338,
      };

      var position = {};
      position.rotateZ = projectLocation.rotateZ;
      position.gisAnglez = (position.rotateZ / 360) * (2 * Math.PI);
      position.minWGS84 = [projectLocation.xp, projectLocation.yp];
      position.maxWGS84 = [
        projectLocation.xp + 0.000001,
        projectLocation.yp + 0.000001,
      ];
      this.targetPosition = position;
      this.cesiumPlugin = new CesiumTool(position, parm.viewer, parm.Cesium);
      this.initPosition(projectLocation, position.minWGS84, position.maxWGS84);
    },
    initPosition(projectLocation, minWGS84, maxWGS84) {
      var gisCenter = null;

      // const buildingTileset = viewer.scene.primitives.add(
      //   Cesium.createOsmBuildings()
      // );
      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0.0),
      //     pitch: Cesium.Math.toRadians(-15.0),
      //   },
      // });
      gisCenter = Cesium.Cartesian3.fromDegrees(
        (minWGS84[0] + maxWGS84[0]) / 2,
        (minWGS84[1] + maxWGS84[1]) / 2 - 1,
        1
      );

      if (projectLocation.startCamera) {
        gisCenter = new Cesium.Cartesian3(
          projectLocation.startCamera[0],
          projectLocation.startCamera[1],
          projectLocation.startCamera[2]
        );

        this.viewer.camera.flyTo({
          destination: gisCenter,
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-45),
            roll: Cesium.Math.toRadians(0),
          },
          duration: 0,
        });
      } else {
        var heading = Cesium.Math.toRadians(0);
        var pitch = Cesium.Math.toRadians(-45);
        var range = 1000.0;
        this.viewer.camera.lookAt(
          gisCenter,
          new Cesium.HeadingPitchRange(heading, pitch, range)
        );
      }
      // 倾斜视图 鼠标左键旋转
      this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.LEFT_DRAG,
      ];

      // 缩放设置 重新设置缩放成员
      this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.MIDDLE_DRAG,
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ];

      // 偏斜平移
      //viewer.scene.screenSpaceCameraController.lookEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG]

      // 平移 添加鼠标右键  鼠标右键平移
      this.viewer.scene.screenSpaceCameraController.rotateEventTypes = [
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
    },

    callFather_before() {
      qmodel.init_gis(this.cesiumPlugin);
    },
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");

      qmodel.set_background(-1, -1);
      if (this.targetPosition.rotateZ) {
        qmodel.set_scene_rotate(this.targetPosition.rotateZ);
      }
      qmodel.create_panel(); //创建一个地平面，效果好一点

      qmodel.set_select_callback(function (id) {
        var cmps = JSON.parse(id);
        console.log(cmps);
        if (cmps.cmpid == "0^aac36e3c-204c-4850-b3f4-3981d74199a8-00031fae") {
          console.log("已经绑定了的设备，弹出自己期望显示的业务");
          clickOne();
          popupDiv.style.display = "block";
          popupDiv.style.left = document.body.clientWidth / 2 - 400 + "px";
        }
      });
    },
    beforeRouteLeave(to, form, next) {
      this.cesiumPlugin = null;
      this.viewer = null;
      this.position = {};

      console.log("level cesium page");
      next();
    },
    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 500px;
  height: 300px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

 
 